<template>
  <view class="course-wrap" :data-theme="globPrimary">
    <u-navbar :is-back="false" :border-bottom="false">
      <view class="search-wrap">
        <u-search
          v-model="keyword"
          :show-action="false"
          height="72"
          placeholder="搜索课程和关键字"
          @search="search"
        ></u-search>
        <view class="cart u-rela" @click="onTokenJump('pageCourse/cart/cart')">
          <u-badge :count="getGlobCartNumber" :offset="[-10, -20]" show-zero></u-badge>
          <u-image width="30px" height="31px" src="@/static/images/navbar_count_icon.png">
          </u-image>
        </view>
      </view>
    </u-navbar>
    <course-dropdown :list="categoryList" @change="handleChange"></course-dropdown>
    <mescroll-body
      ref="mescrollRef"
      :height="mescrollHeight"
      @init="mescrollInit"
      @down="refresh"
      @up="getList"
    >
      <view class="course-list u-rela">
        <!-- 一排一列 -->
        <view class="collist" v-if="globCourseTypeset == 1">
          <course-col
            v-for="(item, index) in courseList"
            :key="index"
            :data="item"
            @path="handleCoursePath(item.id)"
          ></course-col>
        </view>
        <!-- 一排两列 -->
        <u-row class="rowlist" gutter="18" v-else-if="globCourseTypeset == 2">
          <u-col span="6" v-for="(item, index) in courseList" :key="index">
            <course-row :data="item" @path="handleCoursePath(item.id)"></course-row>
          </u-col>
        </u-row>
      </view>
    </mescroll-body>
    <u-tabbar
      :list="tabbarList"
      :active-color="globPrimaryColor"
      inactive-color="#303133"
    ></u-tabbar>

    <edu-user-coupon></edu-user-coupon>
  </view>
</template>

<script>
import courseRow from '@/components/common/courseRow.vue'
import courseCol from '@/components/common/courseCol.vue'
import tabbarList from '@/settings/tabbarSetting.js'
import courseDropdown from '@/components/courseDropdown.vue'
import { mapState, mapGetters } from 'vuex'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
export default {
  mixins: [MescrollMixin],
  components: {
    courseRow,
    courseCol,
    courseDropdown,
  },
  data() {
    return {
      tabbarList,
      keyword: '',
      courseList: [],
      params: {},
      categoryList: [],
    }
  },
  computed: {
    ...mapState({
      getGlobCartNumber: (state) => state.projectSetting.globCartNumber,
    }),
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globCourseTypeset: 'projectSetting/getGlobCourseTypeset',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    globWindowHeight() {
      return this.$u.sys().windowHeight
    },
    mescrollHeight() {
      let height = this.globWindowHeight - this.globNavbarHeight - this.globStatusBarHeight - 93
      return `${height}px`
    },
  },
  options: {
    styleIsolation: 'shared',
  },
  onLoad(options) {
    this.getCategoryList()
  },
  methods: {
    getList(page) {
      this.$edu.api
        .getCourseList({
          ...this.params,
          page: page.num,
          count: page.size,
        })
        .then((res) => {
          const { data } = res
          let list = data.data

          if (page.num == 1) this.courseList = []
          this.courseList = this.courseList.concat(list)
          this.mescroll.endSuccess(list.length)
        })
    },
    // 下拉刷新
    refresh() {
      this.mescroll && this.mescroll.resetUpScroll()
    },
    // 分类
    getCategoryList() {
      this.$edu.api.getCategory().then((res) => {
        const { data } = res
        this.categoryList = data
      })
    },
    // 课程跳转
    handleCoursePath(id) {
      this.$u.route('pageCourse/course/details', {
        id: id,
      })
    },
    // 搜索
    search() {
      this.handleChange(this.params)
    },
    // 点击之前判断用户是否登录
    onTokenJump(url, params) {
      this.$edu.judgeLogin(() => {
        this.$u.route(url, params)
      })
    },
    // 筛选初始化分页数据
    handleChange(e) {
      this.params = {
        ...e,
        title: this.keyword,
      }
      this.mescroll.resetUpScroll(false)
      this.mescroll.scrollTo(0, 0)
    },
  },
}
</script>

<style lang="scss" scoped>
.search-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0 30rpx;
  .cart {
    margin-left: 20rpx;
    width: 56rpx;
    height: 52rpx;
  }
}

.course-wrap {
  width: 100%;
  background-color: #fff;
  .course-list {
    padding: 0rpx 30rpx 30rpx;
  }
}
</style>
